<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ $t("基本信息") }}</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="5" class="table-cell-title">{{ $t('Coupon_ID') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('Name') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('Coupon_type') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('Lowest_spending_value') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('折扣类型') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell">{{ coupon.id }}</el-col>
          <el-col :span="5" class="table-cell">{{ coupon.name }}</el-col>
          <el-col :span="5" class="table-cell">{{ formatType(coupon.type) }}</el-col>
          <el-col :span="5" class="table-cell">{{ $t('Full') }}{{ coupon.min }}{{ $t('元可用') }}</el-col>
          <el-col v-if="coupon.discountType == 1" :span="4" class="table-cell">
            <el-tag>{{ $t('满减') }}</el-tag>
          </el-col>
          <el-col v-else :span="4" class="table-cell">
            <el-tag>{{ $t('百分比') }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell-title">{{ $t('有效期') }}</el-col>
          <el-col :span="5" class="table-cell-title">
            <span v-if="coupon.discountType == 1">
              {{ $t('优惠面值') }}
            </span>
            <span v-else>
              {{ $t('优惠折扣') }}
            </span>
          </el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('每人限额') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('Current_status') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('商品范围') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell" :title="getTimeScope()">{{ getTimeScope() }}</el-col>
          <el-col :span="5" class="table-cell">
            <span v-if="coupon.discountType == 1">
              {{ $t('Discount') }}{{ coupon.discount }}{{ $t('Dollars') }}
            </span>
            <span v-else>
              {{ $t('折扣') }}{{ coupon.discountRate }}{{ $t('%') }}
            </span>
          </el-col>

          <el-col :span="5" class="table-cell">{{ fliterLimit(coupon.limit) }}</el-col>
          <el-col :span="5" class="table-cell">{{ formatStatus(coupon.status) }}</el-col>
          <el-col :span="4" class="table-cell">{{ formatGoodsType(coupon.goodsType) }}</el-col>

        </el-row>
        <el-row>
          <el-col v-if="coupon.type == 3" :span="5" class="table-cell-title">{{ $t('剩余数量') }}</el-col>
          <el-col v-else :span="5" class="table-cell-title">{{ $t('发行数量') }}</el-col>

          <el-col :span="5" class="table-cell-title">{{ $t('等级会员类型') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('付费会员类型') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('使用限制: 年月周日') }}</el-col>
          <el-col :span="4" class="table-cell-title">{{ $t('使用限制数量') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell">{{ coupon.total === 0 ? this.$t("不限") : coupon.total }}</el-col>
          <el-col :span="5" class="table-cell">
            <el-tag v-if="!coupon.levelMemberType || !coupon.levelMemberType.length">{{ $t('无限制') }}</el-tag>
            <el-tag v-else v-for="item in coupon.levelMemberType">{{ levelMemberFilter(item) }}</el-tag>
          </el-col>
          <el-col :span="5" class="table-cell">
            <el-tag v-if="!coupon.moneyMemberType || !coupon.moneyMemberType.length">{{ $t('无限制') }}</el-tag>
            <el-tag v-else v-for="item in coupon.moneyMemberType">{{ moneyMemberFilter(item) }}</el-tag>
          </el-col>
          <el-col class="table-cell" :span="5">
            <template v-if="coupon.useLimit">
              <el-tag>
                {{ reviewLimit(this.coupon.useLimit) }}
              </el-tag>
            </template>
          </el-col>
          <el-col class="table-cell" :span="4">
            <template v-if="coupon.useLimit == 4">
              <el-tag>
                {{ reviewLimit(this.coupon.useLimit) }}
              </el-tag>
            </template>
            <template v-else-if="coupon.useLimitNum">
              {{ this.coupon.useLimitNum }}
            </template>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell-title">{{ $t('与商品活动价共用') }}</el-col>
          <el-col :span="5" class="table-cell-title">{{ $t('领取数量') }}</el-col>
          <el-col :span="10" class="table-cell-title">{{ $t('Explanation') }}</el-col>
          <el-col v-show="coupon.type == 1" :span="4" class="table-cell-title">{{ $t('优惠券码') }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="table-cell">
            {{ coupon.promotionOnly == 0 ? this.$t("共用") : this.$t("不共用") }}
          </el-col>
          <el-col :span="5" class="table-cell">
            {{ coupon.receiveNum }}
          </el-col>
          <el-col :span="10" class="table-cell">
            <template>
              <span style="
                line-height: 1;
                word-break:normal;
                display:inline-block;
                word-wrap: break-word">
                {{ coupon.useInstruction }}
              </span>
            </template>
          </el-col>
          <el-col v-show="coupon.type == 1" :span="4" class="table-cell">
            <el-button type="primary" @click="handleQrcode">{{ $t('查看') }}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card v-if="coupon.goodsType == 2">
      <div slot="header" class="clearfix">
        <span>{{ $t('指定商品') }}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('Store_belong')" prop="shopName">
        </el-table-column>
        <el-table-column align="center" :label="$t('Merchandise_name')" prop="name" />
        <el-table-column align="center" :label="$t('Merchandise_code')" prop="goodsSn" />

      </el-table>

      <pagination v-show="goodsTotal > 0" :total="goodsTotal" :page.sync="listGoodsQuery.page"
        :limit.sync="listGoodsQuery.limit" @pagination="getGoodsList" />
    </el-card>

    <el-card v-if="coupon.goodsType == 1">
      <div slot="header" class="clearfix">
        <span>{{ $t('指定类目列表') }}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listGoodsLoading" :data="goodsList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('Category_Name')" prop="name" />
      </el-table>

      <pagination v-show="goodsTotal > 0" :total="goodsTotal" :page.sync="listGoodsQuery.page"
        :limit.sync="listGoodsQuery.limit" @pagination="getCategoryList" />
    </el-card>

    <el-card v-if="coupon.areaLimit == 1">
      <div slot="header" class="clearfix">
        <span>{{ $t('限制地区列表') }}</span>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listRegionsLoading" :data="regionsList" :element-loading-text="$t('Searching')" border fit
        highlight-current-row>
        <el-table-column align="center" :label="$t('Regions_Name')" prop="nameEn" />
      </el-table>

      <pagination v-show="regionsTotal > 0" :total="regionsTotal" :page.sync="listRegionsQuery.page"
        :limit.sync="listRegionsQuery.limit" @pagination="getRegionList" />
    </el-card>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <!-- 回复反馈对话框 -->
    <el-dialog :visible.sync="qrcodeDialogVisible" :title="$t('优惠券码')">
      <div align="center" @click="">
        <div style="font-size:25px">{{ this.Code }}</div>
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { readCoupon, listCouponUser, listCouponGoods, couponStatistics, listCouponCategory } from '@/api/coupon'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { allForPerm } from '@/api/shop'
import QRCode from "qrcodejs2";
import { levelMemberList, payMemberList } from '../../api/user'
import { listCouponRegions } from '../../api/coupon'

export default {
  name: 'elecCouponDetail',
  components: { Pagination, QRCode },
  filters: {

  },
  data() {
    const limitOptions = [
      {
        value: 0,
        label: this.$t('每年')
      }, {
        value: 1,
        label: this.$t('每月')
      }, {
        value: 2,
        label: this.$t('每周')
      }, {
        value: 3,
        label: this.$t('每天')
      }, {
        value: 4,
        label: this.$t('不限')
      },
    ]
    const defaultTypeOptions = [
      {
        label: this.$t('电子优惠券'),
        value: 1
      },
      {
        label: this.$t('实体优惠券'),
        value: 2
      }, {
        label: this.$t('推广优惠券'),
        value: 3
      }
    ]

    const defaultUseStatusOptions = [
      {
        label: this.$t('未使用'),
        value: 0
      },
      {
        label: this.$t('已使用'),
        value: 1
      },
      {
        label: this.$t('Expired'),
        value: 2
      },
      {
        label: this.$t('Merchandise_removed'),
        value: 3
      }
    ]

    return {
      limitOptions,
      defaultTypeOptions,
      defaultUseStatusOptions,
      typeOptions: Object.assign({}, defaultTypeOptions),
      useStatusOptions: Object.assign({}, defaultUseStatusOptions),
      coupon: {},
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        couponId: 0,
        userId: undefined,
        status: undefined,
        sort: 'add_time',
        order: 'desc'
      },
      goodsList: [],
      regionsList: [],
      goodsTotal: 0,
      regionsTotal: 0,
      listGoodsLoading: false,
      listRegionsLoading: false,
      levelMemberList: [],
      moneyMemberList: [],
      listGoodsQuery: {
        page: 1,
        limit: 20,
        id: 0,
        sort: 'add_time',
        order: 'desc'
      },
      listRegionsQuery: {
        page: 1,
        limit: 20,
        id: 0,
        sort: 'add_time',
        order: 'desc'
      },
      downloadLoading: false,
      shops: [],
      statistics: {},
      qrcodeDialogVisible: false,
      qrcodeData: undefined,
      Code: undefined,
    }
  },
  async created() {
    // //debugger
    await this.init()
    if (this.$route.query.id == null) {
      return
    }

    // if (this.$route.query.statistic == null) {
    //   return
    // }

    this.statistics = this.$route.query.statistic

    this.listGoodsQuery.id = this.$route.query.id
    this.listRegionsQuery.id = this.$route.query.id
    if (this.coupon.goodsType == 2) {

      await this.getGoodsList()
    } else if (this.coupon.goodsType == 1) {

      await this.getCategoryList()

    }
    await this.getRegionList()

    allForPerm().then(response => {
      this.shops = response.data.data.list
    })
  },
  methods: {
    fliterLimit(val) {
      if (!val) return this.$t('不限')
      return val;
    },
    reviewLimit(val) {
      return this.limitOptions[val].label;
    },
    getMember() {
      var data = {
        page: 1,
        limit: 10000,
        status: 2
      }

      var dataLevel = {
        page: 1,
        limit: 10000,
        status: 2,
      }

      payMemberList(data).then(response => {
        this.moneyMemberList = response.data.data.list
        this.listLoading = false
      }).catch(() => {
        this.moneyMemberList = []
        this.listLoading = false
      })

      levelMemberList(dataLevel).then(response => {
        this.levelMemberList = response.data.data.list
        this.listLoading = false
      }).catch(() => {
        this.levelMemberList = []
        this.listLoading = false
      })
    },
    formatType(type) {
      for (let i = 0; i < this.defaultTypeOptions.length; i++) {
        if (type === this.defaultTypeOptions[i].value) {
          return this.defaultTypeOptions[i].label
        }
      }
      return ''
    },
    formatGoodsType(goodsType) {
      if (goodsType === 0) {
        return this.$t('Usable_in_any_situation')
      } else if (goodsType === 1) {
        return this.$t('Select_category')
      } else {
        return this.$t('Select_merchandise')
      }
    },
    formatStatus(status) {
      if (status === 0) {
        return this.$t('Normal')
      } else if (status === 1) {
        return this.$t('已上架')
      } else {
        return this.$t('已下架')
      }
    },
    formatUseStatus(status) {
      if (status === 0) {
        return this.$t('未使用')
      } else if (status === 1) {
        return this.$t('已使用')
      } else if (status === 3) {
        return this.$t('Expired')
      } else {
        return this.$t('Merchandise_removed')
      }
    },
    levelMemberFilter(level) {
      // console.log(this.coupon.levelMemberType)
      // //debugger
      // console.log(this.levelMemberList)
      for (let lengthKey in this.levelMemberList) {

        if (level == this.levelMemberList[lengthKey].id) {
          return this.levelMemberList[lengthKey].name
        }
      }


    },
    moneyMemberFilter(level) {

      for (let lengthKey in this.moneyMemberList) {
        if (level == this.moneyMemberList[lengthKey].id) {
          return this.moneyMemberList[lengthKey].name
        }
      }

    },
    async init() {
      // //debugger
      this.getMember()
      if (this.$route.query.id == null) {
        return
      }
      return readCoupon(this.$route.query.id).then(response => {
        this.coupon = response.data.data
        // console.log(this.coupon);
      })
      this.listQuery.couponId = this.$route.query.id
      await this.getList()
    },
    getList() {
      this.listLoading = true
      return listCouponUser(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    getGoodsList() {
      this.listGoodsLoading = true
      return listCouponGoods(this.listGoodsQuery)
        .then(response => {
          this.goodsList = response.data.data.list
          for (let i = 0; i < this.goodsList.length; i++) {
            if (this.goodsList[i].shopName == "" || this.goodsList[i].shopName == null) {
              this.goodsList[i].shopName = '总部'
            }
          }

          this.goodsTotal = response.data.data.total
          this.listGoodsLoading = false
          // console.log(this.goodsList)
        })
        .catch(() => {
          this.goodsList = []
          this.goodsTotal = 0
          this.listGoodsLoading = false
        })
    },

    getRegionList() {
      this.listRegionsLoading = true
      return listCouponRegions(this.listRegionsQuery)
        .then(response => {
          this.regionsList = response.data.data.list
          this.regionsTotal = response.data.data.total
          this.listRegionsLoading = false
        })
        .catch(() => {
          this.regionsList = []
          this.regionsTotal = 0
          this.listRegionsLoading = false
        })
    },

    getCategoryList() {
      // this.listGoodsLoading = true
      // //debugger
      return listCouponCategory(this.listGoodsQuery)
        .then(response => {
          this.goodsList = response.data.data.list
          this.goodsTotal = response.data.data.total
          this.listGoodsLoading = false
        })
        .catch(() => {
          this.goodsList = []
          this.goodsTotal = 0
          this.listGoodsLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getTimeScope() {
      if (this.coupon.timeType === 0) {
        return this.$t('领取') + this.coupon.days + this.$t('天有效')
      } else if (this.coupon.timeType === 1) {
        return this.$t('自') + this.coupon.startTime + this.$t('至') + this.coupon.endTime + this.$t('有效')
      } else {
        return this.$t('未知')
      }
    },
    getGoodsScope() {
    },
    qrcode() {//这里是调用的方法
      if (this.coupon.barCode == 0 || !this.coupon.barCode) {
        this.Code = this.coupon.code;
      } else {
        this.Code = this.coupon.barCode;
      }
      this.qrcodeData = new QRCode("qrcode", {
        width: 200, // 设置宽度
        height: 200, // 设置高度
        text: this.coupon.code
      });
    },
    handleQrcode() {
      this.qrcodeDialogVisible = !this.qrcodeDialogVisible
      if (!this.qrcodeData) {
        this.$nextTick(function () {
          this.qrcode();
        });
      }
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    }
  }
}
</script>
<style scoped>
.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
